<template>
  <div class="search-table__form">
    <el-form ref="form" inline :model="form" :rules="rules" label-width="130px">
      <el-form-item label="楼宇名称">
        <el-input v-model.trim="params.name" placeholder="情输入楼宇名称" />
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchBuilding"
        >查询</el-button>
      </el-form-item>
      <div class="btn-addlouyu">
        <el-button type="primary" @click="addBtnPark">添加楼宇</el-button>
        <el-dialog
          :title="title"
          :visible.sync="dialogVisible"
          width="35%"
        >
          <el-form-item label="楼宇名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入楼宇名称" />
          </el-form-item>
          <el-form-item label="楼宇层数" prop="floors">
            <el-input v-model="form.floors" placeholder="请输入楼宇层数" />
          </el-form-item>
          <el-form-item label="在管面积(m²)" prop="area">
            <el-input v-model="form.area" placeholder="请输入在管面积(m²)" />
          </el-form-item>
          <el-form-item label="物业费(元/m²)" prop="propertyFeePrice">
            <el-input v-model="form.propertyFeePrice" placeholder="请输入物业费(元/m²)" />
          </el-form-item>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="parkBuilding">确 定</el-button>
          </span>
        </el-dialog>
      </div>
      <el-table :data="tableData" height="500" border style="width: 100%">
        <el-table-column prop="id" label="序号" width="150" />
        <el-table-column prop="name" label="楼宇名称" width="228" />
        <el-table-column prop="floors" label="层数" width="200" />
        <el-table-column prop="area" label="在管面积(m²)" width="200" />
        <el-table-column prop="propertyFeePrice" label="物业费(元/m²)" width="200" />
        <el-table-column prop="status" label="状态" width="150">
          <template v-slot="{ row }">
            <span v-if="row.status === 1">租赁中</span>
            <span v-else-if="row.status === 0">空置中</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150">
          <template v-slot="{ row }">
            <el-button size="mini" type="text" @click="updataBtnPark(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="delBtnPark(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div class="block">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="changePage"
      />
    </div>
  </div>

</template>
<!-- getBuildingId  -->
<script>
import { addBuilding, delBuilding, getBuilding, getBuildingId, updataBuilding } from '@/api/building'
export default {
  data() {
    return {
      id: '',
      total: 0,
      dialogVisible: false,
      title: '新增蝼蚁',
      params: {
        name: '',
        page: 1,
        pageSize: 10
      },
      form: {
        id: '',
        name: '',
        floors: '',
        area: '',
        propertyFeePrice: ''
      },
      tableData: [],
      rules: {
        name: [
          { required: true, message: '请输入楼宇名称', trigger: 'blur' }
        ],
        floors: [
          { required: true, message: '请输入楼宇层数', trigger: 'blur' },

          { validator: (rule, value, callback) => {
            if (value > 20) {
              callback(new Error('楼层层数不能超过20层'))
            } else {
              callback()
            }
          }
          }
        ],
        area: [
          { required: true, message: '请输入在管面积(m²)', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.length > 8) {
                callback(new Error('不超过8位数字,保留小数点后两位'))
              } else {
                callback()
              }
            }
          }
        ],
        propertyFeePrice: [
          { required: true, message: '请输入物业费(元/m²)', trigger: 'blur' },
          {
            validator: (rule, value, callback) => {
              if (value.length > 8) {
                callback(new Error('不超过8位数字,保留小数点后两位'))
              } else {
                callback()
              }
            }
          }
        ]
      }
    }
  },
  created() {
    this.getBuilding()
  },
  methods: {
    async getBuilding() {
      const { rows, total } = await getBuilding(this.params)
      this.tableData = rows
      this.total = total
    },
    addBtnPark() {
      this.dialogVisible = true
      this.title = '新增蝼蚁'
    },
    async updataBtnPark(row) {
      this.dialogVisible = true
      this.title = '编辑蝼蚁'
      // console.log(row)
      const res = await getBuildingId(row)
      console.log('详细id', res)
      // console.log(this.id)rows[0].name
      this.form = res
    },
    async parkBuilding() {
      this.$refs.form.validate()
      if (this.title === '新增蝼蚁') {
        delete this.form.id
        const res = await addBuilding(this.form)
        console.log(res)
      } else if (this.title === '编辑蝼蚁') {
        const { area, name, floors, propertyFeePrice, id } = this.form
        await updataBuilding({ area, name, floors, propertyFeePrice, id })
      }
      this.$message.success('操作成功')
      this.dialogVisible = false
      this.$refs.form.resetFields()
      this.getBuilding()
    },
    async delBtnPark(row) {
      await delBuilding(row)
      this.$message.success('删除成功')
      this.getBuilding()
    },
    async searchBuilding() {
      // const { rows } = await getBuilding()
      // console.log(rows)
      // this.tableData = rows.filter(i => i.name.includes(this.namess))
      // console.log(rows.filter(i => i.name.includes(this.namess)))
      this.tableData.name = this.params.name
      this.getBuilding()
    },
    changePage(page, pageSize) {
      this.params.page = page
      this.params.pageSize = pageSize
      this.getBuilding()
    }

  }

}
</script>

<style>
.search-table__form{
  margin-top: 10px;

  padding: 20px;
  margin-bottom: 10px;
}
.btn-addlouyu{
  width: 150px;
  margin: 10px 50px;
}
.el-form-item__label{
  width: 200px;
  padding-right: 10px;
}
</style>

